<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*分页*/
    .back-page {
        width: 90%;
        margin: auto;
        position: fixed;
        bottom: 0;
    }

    .back-page div div {
        float: left;
        background-color: #3594d6;
        padding: 0 10px;
        margin: 0 10px;
        height: 30px;
        line-height: 30px;
    }

    .back-page div div:last-child {
        background-color: white;
    }

    .back-page span {
        padding: 5px;
    }
</style>
<script>
    function deleteNews(id) {
        let data = {
            id: id,
            method: "delete",
        };
        myAjax("newsUpdate", data, "get");
        getNews();
    }

    function updatenews(id) {
        sessionStorage.setItem("newsId", id);
        $('#content').load('b-newsadd.html');

    }

    //点击全选，再次点击取消
    function checkorcheck() {
        $("[name=news-checkbox]:checkbox").each(function () {
            $(this).prop("checked", $("#allcheck").prop("checked"));
        })
    }

    //全选
    function checkall() {

        $("[name=news-checkbox]:checkbox").each(function () {
            $(this).prop("checked", true);
        })
        $("#allcheck").prop("checked", isallcheck());
    }

    //清空
    function uncheckall() {

        $("[name=news-checkbox]:checkbox").each(function () {
            $(this).prop("checked", false);
        })
        $("#allcheck").prop("checked", isallcheck());
    }

    //反选
    function fanxuan() {
        $("[name=news-checkbox]:checkbox").each(function () {
            //如果当前复选框已选中，则则执行关闭
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
            } else {
                $(this).prop("checked", true);
            }
        });
        $("#allcheck").prop("checked", isallcheck());
    }

    //检查是否全部选择，全部选择则最上面的选中
    function checktrue() {
        $("#allcheck").prop("checked", isallcheck());
    }

    //遍历是否复选框被全部选中
    function isallcheck() {
        let boo = true;
        deleteIds = '';
        checknum = 0;
        $("[name=news-checkbox]:checkbox").each(function () {
            if (!$(this).prop("checked")) {
                boo = false;
            } else {
                deleteIds += $(this).siblings().val() + ",";
                checknum++;
            }
        });
        $("#checkNum").html(checknum)
        return boo;
    }

    var deleteIds = '';
    var checknum = 0;

    function deleteChecked() {
        deleteIds = deleteIds.substr(0, deleteIds.length - 1);
        let array = deleteIds.split(",");
        for (let i = 0; i < array.length; i++) {
            let data = {
                id: array[i],
                method: "delete",
            };
            myAjax("newsUpdate", data, "get");
        }
        getNews();
    }

    function turnPage() {
        getNews();
    }

    function lastPage() {
        let page = parseInt($("#page").val());
        let value = page !== 1 ? --page : page;
        $("#page").val(value);
        getNews();
    }


    function nextPage() {
        let page = parseInt($("#page").val());
        let size = parseInt($("#pageSize").val());
        let num = parseInt($("#countSize").html());
        let value = num > page * size ? ++page : page;
        $("#page").val(value);
        getNews();
    }

    function firstPage() {
        $("#page").val(1);
        getNews();
    }

    function endPage() {
        let size = parseInt($("#pageSize").val());
        let num = parseInt($("#countSize").html());
        $("#page").val(Math.ceil(num / size));
        getNews();
    }
</script>
<body>
<div class="back-page">
    <div>
        <div onclick="checkall()">全选</div>
        <div onclick="uncheckall()">清空</div>
        <div onclick="fanxuan()">反选</div>

        <div onclick="deleteChecked()">删除</div>
        <div onclick="firstPage()">首页</div>
        <div onclick="lastPage()">上一页</div>
        <div onclick="nextPage()">下一页</div>
        <div onclick="endPage()">尾页</div>
        <div>
            <span>共</span><span id="countSize">10</span><span>条</span>
            <span>已选中</span><span id="checkNum">0</span><span>条</span>
            <span>每页显示</span><input type="text" style="width: 20px" id="pageSize" value="10"><span>条</span>
            <span>跳转</span><input type="text" style="width: 20px" id="page" value="1"><span>页</span>
            <input type="button" value="跳转" onclick="turnPage()">
        </div>

    </div>
    <div>

    </div>
</div>
</body>
</html>